<template>
	<view class="container">
		<!-- 头部欢迎信息 -->
		<view class="header">
			<view class="welcome">
				<text class="greeting">您好，{{ userName }}</text>
				<text class="subtitle">欢迎使用智安绿联物联网平台</text>
			</view>
			<view class="notification" @click="goToNotification">
				<image src="/static/icons/notification.png" mode="aspectFit"></image>
				<view v-if="notificationCount > 0" class="badge">{{ notificationCount }}</view>
			</view>
		</view>
		
		<!-- 数据概览卡片 -->
		<view class="data-overview">
			<view class="overview-card" @click="navigateTo('/pages/device/manage')">
				<text class="number">{{ deviceCount }}</text>
				<text class="label">设备总数</text>
			</view>
			<view class="overview-card warning" @click="navigateTo('/pages/device/manage?status=warning')">
				<text class="number">{{ warningCount }}</text>
				<text class="label">告警设备</text>
			</view>
			<view class="overview-card offline" @click="navigateTo('/pages/device/manage?status=offline')">
				<text class="number">{{ offlineCount }}</text>
				<text class="label">离线设备</text>
			</view>
			<view class="overview-card task" @click="navigateTo('/pages/tickets/index')">
				<text class="number">{{ ticketCount }}</text>
				<text class="label">待处理工单</text>
			</view>
		</view>
		
		<!-- 快速入口 -->
		<view class="quick-access">
			<view class="section-title">
				<text>快速入口</text>
			</view>
			<view class="access-grid">
				<view class="access-item" @click="navigateTo('/pages/device/control')">
					<image src="/static/icons/control.png" mode="aspectFit"></image>
					<text>设备控制</text>
				</view>
				<view class="access-item" @click="navigateTo('/pages/device/manage')">
					<image src="/static/icons/manage.png" mode="aspectFit"></image>
					<text>设备管理</text>
				</view>
				<view class="access-item" @click="navigateTo('/pages/test/base64Test')">
					<image src="/static/icons/manage.png" mode="aspectFit"></image>
					<text>验证码工具测试</text>
				</view>
				<view class="access-item" @click="navigateTo('/pages/statistics/index')">
					<image src="/static/icons/stats.png" mode="aspectFit"></image>
					<text>统计分析</text>
				</view>
				<view class="access-item" @click="navigateTo('/pages/scenes/scenes')">
					<image src="/static/icons/scene.png" mode="aspectFit"></image>
					<text>场景管理</text>
				</view>
			</view>
		</view>
		
		<!-- 最近告警 -->
		<view class="recent-alarms">
			<view class="section-title">
				<text>最近告警</text>
				<text class="more" @click="navigateTo('/pages/notification/notification')">查看更多</text>
			</view>
			<view class="alarm-list">
				<view v-if="alarms.length === 0" class="empty-state">
					<text>暂无告警信息</text>
				</view>
				<view v-else v-for="(alarm, index) in alarms" :key="index" class="alarm-item">
					<view class="alarm-icon" :class="getAlarmLevelClass(alarm.level)">
						<text>!</text>
					</view>
					<view class="alarm-content">
						<text class="alarm-title">{{ alarm.title }}</text>
						<text class="alarm-desc">{{ alarm.description }}</text>
						<text class="alarm-time">{{ alarm.time }}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import api from '../common/api.index.js';

export default {
	data() {
		return {
			userName: '用户',
			notificationCount: 0,
			deviceCount: 0,
			warningCount: 0,
			offlineCount: 0,
			ticketCount: 0,
			alarms: []
		}
	},
	onShow() {
		// 获取用户信息
		this.getUserInfo();
		// 加载首页数据
		this.loadHomeData();
		// 加载告警数据
		this.loadAlarmData();
	},
	methods: {
		getUserInfo() {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userName = userInfo.name || '用户';
			}
		},
		
		async loadHomeData() {
			try {
				uni.showLoading({
					title: '加载中'
				});
				
				// 获取设备数据
				const deviceStatsRes = await api.statsApi.getDeviceStats();
				if (deviceStatsRes.code === 200) {
					this.deviceCount = deviceStatsRes.data.total || 0;
					this.warningCount = deviceStatsRes.data.warning || 0;
					this.offlineCount = deviceStatsRes.data.offline || 0;
				}
				
				// 获取工单数据
				const ticketStatsRes = await api.ticketApi.getTicketStats();
				if (ticketStatsRes.code === 200) {
					this.ticketCount = ticketStatsRes.data.pending || 0;
				}
				
				// 获取未读消息数量
				const notificationRes = await api.request('/notification/unread/count', 'GET');
				if (notificationRes.code === 200) {
					this.notificationCount = notificationRes.data || 0;
				}
			} catch (error) {
				console.error('加载首页数据失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		async loadAlarmData() {
			try {
				const alarmRes = await api.alarmApi.getRecentAlarms(5); // 获取最近5条告警
				if (alarmRes.code === 200) {
					this.alarms = alarmRes.data || [];
				}
			} catch (error) {
				console.error('加载告警数据失败:', error);
			}
		},
		
		navigateTo(url) {
			uni.navigateTo({
				url
			});
		},
		
		goToNotification() {
			uni.navigateTo({
				url: '/pages/notification/notification'
			});
		},
		
		getAlarmLevelClass(level) {
			const levelMap = {
				1: 'level-low',
				2: 'level-medium',
				3: 'level-high'
			};
			return levelMap[level] || 'level-low';
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f5f7fa;
	min-height: 100vh;
}

/* 头部样式 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.welcome {
	display: flex;
	flex-direction: column;
}

.greeting {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
}

.notification {
	position: relative;
}

.notification image {
	width: 50rpx;
	height: 50rpx;
}

.badge {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	background-color: #ff4d4f;
	color: white;
	font-size: 20rpx;
	min-width: 30rpx;
	height: 30rpx;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6rpx;
}

/* 数据概览样式 */
.data-overview {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.overview-card {
	width: 23%;
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.overview-card .number {
	font-size: 40rpx;
	font-weight: bold;
	color: #007AFF;
	margin-bottom: 10rpx;
}

.overview-card .label {
	font-size: 24rpx;
	color: #666;
}

.overview-card.warning .number {
	color: #ffaa00;
}

.overview-card.offline .number {
	color: #ff4d4f;
}

.overview-card.task .number {
	color: #52c41a;
}

/* 快速入口样式 */
.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.section-title text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-title .more {
	font-size: 28rpx;
	color: #007AFF;
	font-weight: normal;
}

.quick-access {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.access-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10rpx;
}

.access-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 10rpx;
}

.access-item image {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 15rpx;
}

.access-item text {
	font-size: 26rpx;
	color: #333;
}

/* 最近告警样式 */
.recent-alarms {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.alarm-list {
	margin-top: 10rpx;
}

.empty-state {
	display: flex;
	justify-content: center;
	padding: 40rpx 0;
}

.empty-state text {
	color: #999;
	font-size: 28rpx;
}

.alarm-item {
	display: flex;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f0f0f0;
}

.alarm-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.alarm-icon {
	width: 50rpx;
	height: 50rpx;
	border-radius: 25rpx;
	background-color: #ffaa00;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
}

.alarm-icon text {
	color: white;
	font-weight: bold;
}

.alarm-icon.level-low {
	background-color: #52c41a;
}

.alarm-icon.level-medium {
	background-color: #ffaa00;
}

.alarm-icon.level-high {
	background-color: #ff4d4f;
}

.alarm-content {
	flex: 1;
}

.alarm-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.alarm-desc {
	font-size: 26rpx;
	color: #666;
	margin: 10rpx 0;
}

.alarm-time {
	font-size: 24rpx;
	color: #999;
}
</style>
